import React, { memo, useEffect, useState } from "react";
import { useUserToken, useLogLife, useScrollPosition } from "./hooks";

const Home = memo(() => {
  useLogLife('Home')
  const scrollY = useScrollPosition()
  const [user, token] = useUserToken()
  return (
    <div style={{height: '80vh'}}>
      Home
      <div>{user.name}-{user.age}-token:{token}</div>
      <div>滚动位置：{scrollY}</div>
    </div>
  )
})

const About = memo(() => {
  useLogLife('About')
  const scrollY = useScrollPosition()
  return (
    <div style={{height: '80vh'}}>
      About
      <div>滚动位置：{scrollY}</div>
    </div>
  )
})

const App = memo(() => {
  useLogLife('App')
  const [user, token] = useUserToken()
  const [ showHome, setShowHome] = useState(true)
  return (
    <div>
      { showHome && <Home /> }
      <About />
      <button onClick={e => setShowHome(!showHome)}>切换home组件显示</button>
    </div>
  )
});

export default App;
